<template>
  <div id="gui"></div>
</template>

<script>
// ES6:
import { GUI } from "dat.gui";
// 实例化一个gui对象
const gui = new GUI();
// 改变交互界面style属性
gui.domElement.style.width = "300px";
export default {
  name: "Gui",
  model: {
    props: "value",
    event: "update"
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return { x: 30, y: 60, z: 300 };
      }
    }
  },
  data() {
    return {
      guiObj: this.value // 创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
      // { x: 30, y: 60, z: 300, intensity: 1.0 }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 执行gui的.add()方法可以快速创建一个UI交互界面,比如一个拖动条
      // gui界面上增加交互界面，改变obj对应属性
      // ! 1. 创建模型子菜单
      this.meshFolder();
      // ! 2. 创建光源子菜单
      this.lightFolder();
      // ! 3. 是否选中
      // 属性的数据类型：布尔值 -> 单选框
      gui.add(this.guiObj, "rotateY").name("是否旋转");

      document.getElementById("gui").appendChild(gui.domElement);
    },
    // 模型子菜单
    meshFolder() {
      const meshFolder = gui.addFolder("模型");
      meshFolder.open(); // 设置初始关闭状态
      const matFolder = meshFolder.addFolder("材质");
      // 设置物体模型颜色
      matFolder
        // .addColor()生成颜色值改变的交互界面
        .addColor(this.guiObj, "meshColor")
        .name("颜色")
        .onChange(value => {
          console.log("颜色：", value);
          this.$emit("changeMeshColor", value);
          this.$emit("change", this.guiObj);
        });

      // 坐标
      const posFolder = meshFolder.addFolder("位置");
      posFolder
        // todo 方法参数3和4数据类型：数字 -> 滚动条
        .add(this.guiObj, "x", 0, 100)
        .name("X轴")
        .onChange(value => {
          console.log("x轴坐标：", value);
          this.$emit("changeX", value);
          this.$emit("change", this.guiObj);
        });
      posFolder
        // todo 方法参数3数据类型：数组/对象 -> 下拉框
        .add(this.guiObj, "y", [-100, 0, 100])
        .name("Y轴")
        .onChange(value => {
          console.log("y轴坐标：", value);
          this.$emit("changeY", value);
          this.$emit("change", this.guiObj);
        });
      posFolder
        // todo 方法参数3数据类型：数组/对象 -> 下拉框
        .add(this.guiObj, "z", { 左: -100, 中: 0, 右: 100 })
        .name("Z轴")
        // 属性值发生改变调用的方法
        .onChange(value => {
          console.log("z轴坐标：", value);
          this.$emit("changeZ", value);
          this.$emit("change", this.guiObj);
        });
    },
    // 光源子菜单
    lightFolder() {
      const lightFolder = gui.addFolder("光源");
      const pointFolder = lightFolder.addFolder("点光源");
      // 光照强度属性.intensity
      pointFolder
        .add(this.guiObj, "intensity", 0, 2.0)
        .step(0.1) // 步长
        .name("光照强度");
    }
  },
  watch: {
    guiObj(newValue) {
      this.$emit("update", newValue);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>